import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0,
        arr: [1,2,3,4,5]
    },
    getters: {//计算属性 第一个参数state 第二个参数getters
        getArrLength(state){
            return state.arr.length
        },
        getArrLengthStr(state, getters){//第二个参数
            // return "最终数组长度为:" + state.arr.length
            return "最终数组长度为:" + getters.getArrLength
        },
    },
    mutations: {//唯一可以修改State中数据的方法
        increment(state){
            state.count++;
        },
        decrement(state){
            //异步操作必须要在actions中进行,不然devtools还是不能跟踪
            // setTimeout(()=>{
                state.count--
            // },1000)
        },
        incrementNum(state, num){
            state.count += num;
        },
    },
    actions: {//在vuex中如果要实现异步操作,那么必须都要写在actions中
        setTimeAdd(context){ //上下文 context==> $store的实例
            console.log(context)
            setTimeout(()=>{
                // context.state.count++//在actions中同样的不允许直接修改state的值,必须要通过commit来调用mutations中的方法
                context.commit("increment")
            },1000)
        }
    },
    modules: {},
    //vuex持久化
    plugins:{//插件

    }
})
